﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="/netctoss/">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NetCTOSS</title>
        <link type="text/css" rel="stylesheet" media="all" href="styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            function deleteRole() {
                var r = window.confirm("确定要删除此角色吗？");
                document.getElementById("operate_result_info").style.display = "block";
            }
        </script>
        <style type="text/css">
            li {
                list-style: none;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="navibar"></div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <form action="" method="">
                <!--查询-->
                <div class="search_add">
                    <input type="button" value="增加" class="btn_add" onclick="location.href='role_add.html';" />
                </div>  
                <!--删除的操作提示-->
                <div id="operate_result_info" class="operate_success">
                    <img src="images/close.png" onclick="this.parentNode.style.display='none';" />
                    删除成功！
                </div> <!--删除错误！该角色被使用，不能删除。-->
                <!--数据区域：用表格展示数据-->     
                <div id="data">                      
                    <table id="datalist">
                        <tr>                            
                            <th>角色 ID</th>
                            <th>角色名称</th>
                            <th class="width600">拥有的权限</th>
                            <th class="td_modi"></th>
                        </tr>                      
                        <tr v-for="role in pageInfo.list">
                            <td>{{role.roleId}}</td>
                            <td>{{role.roleName}}</td>
                            <td>{{role.privileges}}</td>
                            <td>
                                <input type="button" value="修改" class="btn_modify" onclick="location.href='role_modi.html';"/>
                                <input type="button" value="删除" class="btn_delete" onclick="deleteRole();" />
                            </td>
                        </tr>

                    </table>
                </div> 
                <!--分页-->
                <div id="pages">
                    <li><a @click="selectPage(1,pageInfo.pageSize)">首页</a></li>
                    <li><a @click="pageInfo.isFirstPage==true?selectPage(1,pageInfo.pageSize):selectPage(pageInfo.prePage,pageInfo.pageSize)">上一页</a></li>
                    <li v-for="i in pageInfo.navigatepageNums" :class="[pageInfo.pageNum==i?'current_page':'']"><a @click="selectPage(i,pageInfo.pageSize)">{{i}}</a></li>
                    <li><a @click="pageInfo.isLastPage==true?selectPage(pageInfo.pages,pageInfo.pageSize):selectPage(pageInfo.nextPage,pageInfo.pageSize)">下一页</a></li>
                    <li><a @click="selectPage(pageInfo.pages,pageInfo.pageSize)">末页</a></li>
                </div>
            </form>
        </div>
        <div>
            <script type="text/javascript" src="jquery/jquery.js"></script>
            <script type="text/javascript" src="vue/vue.js"></script>
            <script type="text/javascript" src="vue/axios.js"></script>
            <script type="text/javascript" src="js/role/index.js"></script>
            <script type="text/javascript" src="layer/layer.js"></script>
        </div>
        <script>
            $(function(){//页面加载完成后加载
                //load（网页）  在组件加载的时候，发送ajax请求获取服务器返回回来的页面内容
                $("#navibar").load("html/common/navibar.html");
            })
        </script>
    </body>
</html>
